<script setup>

    const props = defineProps({
        list: {
            type: Array,
            default: []
        },
        formData: {
            type: Object,
            default: {}
        },
        type: {
            type: String,
            default: ''
        }
    })

    const emit = defineEmits(['changeForm'])

    let form = $ref(JSON.parse(JSON.stringify(props.formData)))


    let list = props.list
    
    const changeInput = (v, data) => {
        emit('changeForm', v, data)
    }

</script>

<template>
    <div>
        <el-form :inline="true" :model="form" :label-width="140">
            <template v-if="props.type=='details'">
                <el-row>
                    <el-col 
                        :span="12"
                        v-for="(v, vIndex) in list"
                        :key="vIndex"
                    >
                        <el-form-item 
                            :label="v.label + '：'">
                            <p>{{ form[v.value] }}</p>
                        </el-form-item>
                    </el-col>
                </el-row>
            
            </template>

            <template v-else>
                <el-form-item 
                    v-for="(v, vIndex) in list"
                    :key="vIndex"
                    :label="v.label">
                    <el-select 
                        v-if="v.type=='select'" 
                        v-model="form[v.value]" 
                        :disabled="props.type=='details'"
                        @change="changeInput(v.value, form[v.value])"
                    >
                        <el-option
                            v-for="(item, index) in v.selectData"
                            :key="index"
                            :label="item" 
                            :value="item" 
                        />
                    </el-select>
                    <el-date-picker
                        v-else-if="v.type == 'date'"
                        v-model="form[v.value]"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        type="date"
                        @change="changeInput(v.value, form[v.value])"
                    />
                    <el-input 
                        v-else 
                        v-model="form[v.value]"
                        :disabled="props.type=='details'"
                        @change="changeInput(v.value, form[v.value])"
                    ></el-input>
                </el-form-item>
            </template>
            
        </el-form>
    </div>
</template>